<template>
  <view>
    <view class="status_bar">
      <view class="top_view"></view>
    </view>
    <!-- <view class="sfb">
      <view class="sfb-logo"></view>
      <view class="sfbName" style="font-size:20px;font-weight:500;">速 付 宝</view>
    </view>-->
    <view class="grace-padding">
      <!-- <view style="margin-top:50px;" class="grace-center">
			<image src='../../static/imgs/logo.png' style='width:68px; height:68px; border-radius:8px;'></image>
      </view>-->
      <view class="sfb">
        <view class="sfb-logo"></view>
        <view class="sfbName" style="font-size:20px;font-weight:500;">速 付 宝</view>
      </view>
      <view class="grace-form" style="margin-top:50upx;">
        <form @submit="loginNow">
          <view class="grace-items item-border">
            <!-- <view class="grace-label">
              <picker :value="pnpre" @change="changePre" :range="pnpres" name="pn_pre">
                <text>+{{pnpre}}</text>
              </picker>
            </view>-->
            <input
              type="text"
              name="userName"
              class="input"
              style="text-align:left;"
              placeholder="请输入手机号/速付宝账号"
              placeholder-style="color:#A8A8A7"
            >
          </view>
          <view class="grace-space-between item-border" style="margin-top:28upx;">
            <view class="grace-items" style="width:70%;">
              <!-- <view class="grace-label grace-center">验证码</view> -->
              <input
                type="text"
                password="true"
                class="input"
                name="password"
                placeholder="请输入登录密码"
                placeholder-style="color:#A8A8A7"
              >
            </view>
            <!-- 边框 -->
            <!-- <view></view> -->
            <view
              class="forget grace-items"
              @tap="forgetPassword"
              style="width:28%;  margin-left:2%; paading:0;"
            >
              <!-- <button type="primary" class="login-sendmsg-btn" @tap="getVCode">{{vcodeBtnName}}</button> -->
              <text>| &#x3000;</text>&#x3000;&#x3000;&#x3000;忘记密码?
            </view>
          </view>
          <button
            form-type="submit"
            class="btn"
            type="primary"
            style="background:#007BC3; margin-top:30px;"
          >登录
            <!-- <text class="grace-iconfont icon-arrow-right"></text> -->
          </button>
          <button
            plain="true"
            class="btn btn-two"
            type="primary"
            style=" margin-top:30px;"
            @tap="toRegister"
          >账号注册
            <!-- <text class="grace-iconfont icon-arrow-right"></text> -->
          </button>
        </form>
      </view>
    </view>
  </view>
</template>

<script>
import { post } from "@/util/request";
import URL from "@/api/serverApi";
var graceChecker = require("../../graceUI/graceChecker.js");
export default {
  data() {
    return {
      pnpre: "86",
      pnpres: ["86", "01", "11", "26", "520"],
      vcodeBtnName: "获取验证码",
      countNum: 120,
      countDownTimer: null
    };
  },
  methods: {
    //   跳转到注册页面
    toRegister() {
      uni.navigateTo({
        url: "./register"
      });
    },
    forgetPassword() {
      uni.navigateTo({
        url: "./forgetPassword"
      });
    },
    changePre: function(e) {
      this.pnpre = this.pnpres[e.detail.value];
    },
    async loginNow(e) {
      // 表单验证
      var rule = [
        // {
        //   name: "phonenumber",
        //   checkType: "phoneno",
        //   errorMsg: "请填写正确的手机号"
        // },
        {
          name: "password",
          checkType: "string",
          checkRule: "6",
          errorMsg: "密码必须大于6位数"
        }
      ];
      var formData = e.detail.value;
      var checkRes = graceChecker.check(formData, rule);
      // 验证通过
      if (checkRes) {
        uni.showToast({ title: "验证通过...", icon: "none" });
        console.log(JSON.stringify(e.detail.value));
        // console.log(e);
        let data = e.detail.value;
        console.log(132);

        let res = await post(URL.login, data);
        console.log(res);
        // console.log(JSON.stringify(res));

        if (res.code == 200 && res.message == true) {
          uni.showToast({ title: "登录成功", icon: "none" });
          // uni.navigateTo({
          //   url: "../TabBar/Home/index"
          // });
          uni.reLaunch({
            url: "../TabBar/Home/index"
          });
          console.log("tiao");
        } else if (res.code == 200 && res.message == false) {
          uni.showToast({ title: "密码错误,请再想想自己的密码", icon: "none" });
        } else if (res.code == 200 && res.message == "用户名不存在") {
          // uni.showToast({ title: "用户名不存在,正在前往注册", icon: "none" });
          uni.showModal({
            title: "用户名不存在,是否前往注册",
            content: "你好,欢迎使用速付宝",
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
                uni.navigateTo({
                  url: "./register"
                });
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            }
          });
        }
        // console.log(res);
      } else {
        uni.showToast({ title: graceChecker.error, icon: "none" });
      }
    },
    getVCode: function() {
      // vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
      if (
        this.vcodeBtnName != "获取验证码" &&
        this.vcodeBtnName != "重新发送"
      ) {
        return;
      }
      this.vcodeBtnName = "发送中...";
      // 与后端 api 交互，发送验证码 【自己写的具体业务代码】
      // 假设发送成功，给用户提示
      uni.showToast({ title: "短信已发送，请注意查收", icon: "none" });
      // 倒计时
      this.countNum = 120;
      this.countDownTimer = setInterval(
        function() {
          this.countDown();
        }.bind(this),
        1000
      );
    },
    countDown: function() {
      if (this.countNum < 1) {
        clearInterval(this.countDownTimer);
        this.vcodeBtnName = "重新发送";
        return;
      }
      this.countNum--;
      this.vcodeBtnName = this.countNum + "秒重发";
    },
    reg: function() {
      wx.showToast({ title: "注册页面类似登录，请自行完善 (:", icon: "none" });
    }
  }
};
</script>

<style lang="scss" scoped>
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
}
.sfb {
  margin-top: 146upx;
  margin-bottom: 93upx;
  text-align: center;
  .sfb-logo {
    margin: 0 auto;
    width: 155upx;
    height: 155upx;
    background: red;
    // font-size: 80px;
    .sfbName {
      font-size: 80px;
      text-align: center;
    }
  }
}
.grace-padding {
  height: 1444px;
  padding: 3%;
  width: 94%;
}
.item-border {
  border-bottom: 1px solid #c1c0bf !important;
}
.login-sendmsg-btn {
  border: 1px solid #00c777 !important;
  background: none !important;
  color: #00c777 !important;
  width: 100%;
  height: 35px;
  line-height: 35px;
  margin-top: 6px;
  font-size: 14px !important;
}
.grace-login-three {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
.grace-login-three view {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 46px;
  color: #00c777;
  text-align: center;
  margin: 8px 15px;
}
.btn {
  height: 66upx;
  line-height: 66upx;
  font-size: 33upx;
  width: 98%;
}
.btn-two {
  color: #007bc3 !important;
  border: 1px solid #007bc3 !important;
}
.input {
  margin-left: 0;
}

.grace-form .grace-items .input {
  margin-left: 0;
  text-align: left;
  padding: 0;
  margin: 10px 10px 0 10px;
}
.forget {
  display: flex;
  align-items: flex-end;
  text-align: right;
  justify-content: flex-end;
  font-size: 30upx;
  font-weight: 500;
  border: none;
  text {
    color: #c1c0bf;
  }
}
.grace-form .grace-items {
  display: flex;
  align-items: flex-end;
}
.grace-items .item-border {
  padding-bottom: 0;
}
</style>